<template>
  <el-card class="category-container">
    <template #header>
      <div class="header">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="handleAdd"
          >增加</el-button
        >
        <el-popconfirm title="确定删除吗？" @confirm="handleDelete">
          <template #reference>
            <el-button type="danger" size="small" icon="el-icon-delete"
              >批量删除</el-button
            >
          </template>
        </el-popconfirm>
      </div>
    </template>
    <el-table
      v-loading="loading"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="categoryName" label="分类名称"> </el-table-column>
      <el-table-column prop="categoryRank" label="排序值" width="120">
      </el-table-column>
      <el-table-column prop="createTime" label="添加时间" width="200">
      </el-table-column>
      <el-table-column label="操作" width="220">
        <template #default="scope">
          <a
            style="cursor: pointer; margin-right: 10px"
            @click="handleEdit(scope.row.categoryId)"
            >修改</a
          >
          <a
            style="cursor: pointer; margin-right: 10px"
            @click="handleNext(scope.row)"
            >下级分类</a
          >
          <el-popconfirm
            title="确定删除吗？"
            @confirm="handleDeleteOne(scope.row.categoryId)"
          >
            <template #reference>
              <a style="cursor: pointer">删除</a>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--总数超过一页，再展示分页器-->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="changePage"
    />
  </el-card>
  <DialogAddCategory
    ref="addGood"
    :reload="getCategory"
    :type="type"
    :level="level"
    :parent_id="parent_id"
  />
</template>

<script>
import { onMounted, onUnmounted, reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import DialogAddCategory from "@/components/DialogAddCategory.vue";
import axios from "@/utils/axios";
export default {
  name: "Category",
  components: {
    DialogAddCategory,
  },
  setup() {
    const multipleTable = ref(null);
    const addGood = ref(null);
    const router = useRouter();
    const route = useRoute();
    const state = reactive({
      loading: false,
      tableData: [], // 数据列表
      multipleSelection: [], // 选中项
      total: 0, // 总条数
      currentPage: 1, // 当前页
      pageSize: 10, // 分页大小
      type: "add", // 操作类型
      level: 1,
      parent_id: 0,
    });
    onMounted(() => {
      getCategory();
    });
    onUnmounted(() => {
      unwatch();
    });
    const unwatch = router.afterEach((to) => {
      if (["category", "level2", "level3"].includes(to.name)) {
        getCategory();
      }
    });
    // 获取分类列表
    const getCategory = () => {
      const { level = 1, parent_id = 0 } = route.query;
      state.loading = true;
      setTimeout(() => {
        const list = [
          {
            categoryId: 1044,
            categoryLevel: 1,
            parentId: 0,
            categoryName: "卤味熟食店",
            categoryRank: 200,
            isDeleted: 0,
            createTime: "2022-04-21 16:17:28",
            createUser: 0,
            updateTime: "2022-05-31 14:39:41",
            updateUser: 0,
          },
          {
            categoryId: 1074,
            categoryLevel: 1,
            parentId: 0,
            categoryName: "软件行业如果他",
            categoryRank: 200,
            isDeleted: 0,
            createTime: "2022-04-21 20:36:53",
            createUser: 0,
            updateTime: "2022-04-21 20:36:53",
            updateUser: 0,
          },
          {
            categoryId: 1072,
            categoryLevel: 1,
            parentId: 0,
            categoryName: "个人特工",
            categoryRank: 200,
            isDeleted: 0,
            createTime: "2022-04-21 20:36:16",
            createUser: 0,
            updateTime: "2022-04-21 20:36:16",
            updateUser: 0,
          },
          {
            categoryId: 1053,
            categoryLevel: 1,
            parentId: 0,
            categoryName: "同心便利店",
            categoryRank: 200,
            isDeleted: 0,
            createTime: "2022-04-21 17:21:13",
            createUser: 0,
            updateTime: "2022-05-20 11:30:32",
            updateUser: 0,
          },
          {
            categoryId: 973,
            categoryLevel: 1,
            parentId: 0,
            categoryName: "甜心烘培房",
            categoryRank: 200,
            isDeleted: 0,
            createTime: "2022-04-10 16:43:53",
            createUser: 0,
            updateTime: "2022-05-21 12:32:46",
            updateUser: 0,
          },
          {
            categoryId: 1033,
            categoryLevel: 1,
            parentId: 0,
            categoryName: "沙县小吃",
            categoryRank: 200,
            isDeleted: 0,
            createTime: "2022-04-20 14:41:24",
            createUser: 0,
            updateTime: "2022-05-24 19:17:01",
            updateUser: 0,
          },
          {
            categoryId: 1057,
            categoryLevel: 1,
            parentId: 0,
            categoryName: "黑菜1",
            categoryRank: 200,
            isDeleted: 0,
            createTime: "2022-04-21 19:41:31",
            createUser: 0,
            updateTime: "2022-05-28 16:25:14",
            updateUser: 0,
          },
          {
            categoryId: 1069,
            categoryLevel: 1,
            parentId: 0,
            categoryName: "千禧炸串",
            categoryRank: 200,
            isDeleted: 0,
            createTime: "2022-04-21 20:34:07",
            createUser: 0,
            updateTime: "2022-05-24 19:15:38",
            updateUser: 0,
          },
          {
            categoryId: 1073,
            categoryLevel: 1,
            parentId: 0,
            categoryName: "软件行业",
            categoryRank: 200,
            isDeleted: 0,
            createTime: "2022-04-21 20:36:34",
            createUser: 0,
            updateTime: "2022-04-21 20:36:34",
            updateUser: 0,
          },
          {
            categoryId: 1071,
            categoryLevel: 1,
            parentId: 0,
            categoryName: "迪迦",
            categoryRank: 200,
            isDeleted: 0,
            createTime: "2022-04-21 20:35:07",
            createUser: 0,
            updateTime: "2022-04-21 20:35:07",
            updateUser: 0,
          },
        ];
        state.tableData = list;
        state.currentPage = 1;
        state.total = 799;
        state.loading = false;
        state.level = level;
        state.parentId = parent_id;
      }, 2000);
    };
    // 添加分类
    const handleAdd = () => {
      state.type = "add";
      addGood.value.open();
    };
    // 修改分类
    const handleEdit = (id) => {
      state.type = "edit";
      addGood.value.open(id);
    };
    // 选择项
    const handleSelectionChange = (val) => {
      state.multipleSelection = val;
    };
    // 批量删除
    const handleDelete = () => {
      if (!state.multipleSelection.length) {
        ElMessage.error("请选择项");
        return;
      }
      axios
        .delete("/categories", {
          data: {
            ids: state.multipleSelection.map((i) => i.categoryId),
          },
        })
        .then(() => {
          ElMessage.success("删除成功");
          getCategory();
        });
    };
    // 单个删除
    const handleDeleteOne = (id) => {
      axios
        .delete("/categories", {
          data: {
            ids: [id],
          },
        })
        .then(() => {
          ElMessage.success("删除成功");
          getCategory();
        });
    };
    const changePage = (val) => {
      state.currentPage = val;
      getCategory();
    };
    const handleNext = (item) => {
      const levelNumber = item.categoryLevel + 1;
      if (levelNumber == 4) {
        ElMessage.error("没有下一级");
        return;
      }
      router.push({
        name: `level${levelNumber}`,
        query: {
          level: levelNumber,
          parent_id: item.categoryId,
        },
      });
    };
    return {
      ...toRefs(state),
      multipleTable,
      handleSelectionChange,
      addGood,
      handleAdd,
      handleEdit,
      handleDelete,
      handleDeleteOne,
      getCategory,
      changePage,
      handleNext,
    };
  },
};
</script>

<style scoped>
.category-container {
  min-height: 100%;
}
.el-card.is-always-shadow {
  min-height: 100% !important;
}
</style>